<template>
	<div class="aui-wrapper aui-page__login">
		<div class="aui-content__wrapper">
			<main class="aui-content">
				<div class="login-header">
					<h2 class="login-brand">口罩人像识别系统</h2>
				</div>
				<div class="login-body">
					<div class="login_p">
						<img src="../../../src/assets/img/login_p.png" alt="" style="object-fit: contain">
					</div>
					<div class="login_dl">
						<div class="login-title">{{ $t('login.title') }}</div>
						<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
						 status-icon style="width:300px">
							<el-form-item prop="username">
								<el-input v-model="dataForm.username" :placeholder="$t('login.username')">
									<span slot="prefix" class="el-input__icon">
										<svg class="icon-svg" aria-hidden="true">
											<use xlink:href="#icon-user"></use>
										</svg>
									</span>
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
									<span slot="prefix" class="el-input__icon">
										<svg class="icon-svg" aria-hidden="true">
											<use xlink:href="#icon-lock"></use>
										</svg>
									</span>
								</el-input>
							</el-form-item>
							<el-form-item prop="captcha">
								<el-row :gutter="20">
									<el-col :span="14">
										<el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
											<span slot="prefix" class="el-input__icon">
												<svg class="icon-svg" aria-hidden="true">
													<use xlink:href="#icon-safetycertificate"></use>
												</svg>
											</span>
										</el-input>
									</el-col>
									<el-col :span="10" class="login-captcha">
										<img :src="captchaPath" @click="getCaptcha()">
									</el-col>
								</el-row>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</main>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	import debounce from 'lodash/debounce'
	import {
		messages
	} from '@/i18n'
	import {
		getUUID
	} from '@/utils'
	export default {
		data() {
			return {
				i18nMessages: messages,
				captchaPath: '',
				dataForm: {
					username: '',
					password: '',
					uuid: '',
					captcha: ''
				}
			}
		},
		computed: {
			dataRule() {
				return {
					username: [{
						required: true,
						message: this.$t('validate.required'),
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: this.$t('validate.required'),
						trigger: 'blur'
					}],
					captcha: [{
						required: true,
						message: this.$t('validate.required'),
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.getCaptcha()
		},
		methods: {
			// 获取验证码
			getCaptcha() {
				this.dataForm.uuid = getUUID()
				this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				this.$refs['dataForm'].validate((valid) => {
					if (!valid) {
						return false
					}
					this.$http.post('/login', this.dataForm).then(({
						data: res
					}) => {
						if (res.code !== 0) {
							this.getCaptcha()
							return this.$message.error(res.msg)
						}
						Cookies.set('token', res.data.token)
						this.$router.replace({
							name: 'monitoring-home'
						})
					}).catch(() => {})
				})
			}, 1000, {
				'leading': true,
				'trailing': false
			})
		}
	}
</script>
<style scoped>
	.aui-page__login {
		background-image: url("../../assets/img/login_bg.png")
	}

	.login-body {
		display: flex
	}

	.login-body .login_p {
		width: 700px;
		height: 550px;
		margin-right: 40px;
	}

	.login_dl {
		display: flex;
		flex-direction: column;
		margin-top: 50px;
	}

	.login_dl .login-title {
		font-size: 30px;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 50px;
	}

	.el-input {
		margin-bottom: 20px;
	}
</style>
